<template>
  <div class="new-fan-main">
    <div class="new-fan-head">
      <div class="head-title">
        名片加好友
        <span class="example-text">示例</span>
        <div class="example-modal">
          <img class="example-cover" src="@/assets/images/pic_add_friend_example.png" />
        </div>
      </div>
    </div>
    <el-form ref="form" :model="form" label-width="150px" class="new-fan-body" label-position="left">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-content">
            <div class="flex-grid-row">
              <img class="cover-image" src="@/assets/images/add_firend_box_status.gif" />
              <div class="status">任务执行中</div>
              <el-button class="btn" type="primary" plain size="small">停用</el-button>
              <el-button class="btn" plain size="small" @click="taskInfoVisible = true">查看详情</el-button>
            </div>
          </div>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              基本设置
              <span style="color: #2f54eb;margin-left: 8px;font-weight: 400;">示例</span>
            </div>
          </div>
          <div class="card-content">
            <el-form-item>
              <div slot="label">
                <span class="f-14 pt-4 mr-8">从客户接收</span>
                <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
                  <div slot="content">
                    从客户那接收客户名片加好友
                  </div>
                  <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                </el-tooltip>：
              </div>
              <el-radio-group v-model="form.customerType">
                <el-radio :label="1"><span class="c_text" style="font-weight: 400;">全部客户</span> </el-radio>
                <el-radio :label="2"><span class="c_text" style="font-weight: 400;">部分客户</span></el-radio>
              </el-radio-group>
              <div class="radio-card" v-if="form.customerType === 1">
                <i class="el-icon-warning-outline"></i>
                <span>选中企微号的全部客户</span>
              </div>
              <div class="container-card" v-if="form.customerType === 2">
                <el-button class="btn" plain size="small" @click.native="customerVisible = true">添加客户</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <div slot="label">
                <span class="f-14 pt-4 mr-8">从企业成员接收</span>
                <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
                  <div slot="content">
                    从企业成员那接收客户名片加好友
                  </div>
                  <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                </el-tooltip>：
              </div>
              <el-radio-group v-model="form.accountType">
                <el-radio :label="1"><span class="c_text" style="font-weight: 400;">全部成员</span> </el-radio>
                <el-radio :label="2"><span class="c_text" style="font-weight: 400;">部分成员</span></el-radio>
              </el-radio-group>
              <div class="radio-card" v-if="form.accountType === 1">
                <i class="el-icon-warning-outline"></i>
                <span>选中全部企业成员</span>
              </div>
              <div class="container-card" v-if="form.accountType === 2">
                <el-button class="btn" plain size="small" @click="enterpriseVisible = true">添加企业成员</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">
              加好友设置
            </div>
          </div>
          <div class="card-content">
            <el-form-item label="验证消息：" style="width: 100%;">
              <el-input type="textarea" :rows="6" maxlength="50" show-word-limit style="width: 480px;" />
            </el-form-item>
            <el-form-item label="发送申请时间间隔：" style="width: 100%;">
              <div class="appy-time-rows">
                <div class="row-item">
                  <el-input size="small" v-model="value" style="width: 80px;" />
                  <span>秒</span>
                </div>
                <span class="liner">-</span>
                <div class="row-item">
                  <el-input size="small" v-model="value" style="width: 80px;" />
                  <span>秒</span>
                </div>
                <el-button size="small" @click="setDefaultValue()" style="margin-left: 8px;">设为推荐值</el-button>
              </div>
            </el-form-item>
            <el-form-item label="每日发送申请上限：" style="width: 100%;">
              <div class="appy-time-rows">
                <div class="row-item">
                  <el-input size="small" v-model="value" style="width: 80px;" />
                  <span>次</span>
                </div>
                <el-button size="small" @click="setDefaultValue()" style="margin-left: 8px;">设为推荐值</el-button>
              </div>
            </el-form-item>
            <el-form-item label="休眠时间段：" style="width: 100%;">
              <el-switch class="small" v-model="isCheck" />
              <div class="condition-block" v-show="isCheck">
                <div class="flex-rows">
                  <el-time-select size="small" placeholder="选择时间" style="width: 118px;" />
                  <span style="color: rgb(136, 137, 153);margin: 0 4px;">~</span>
                  <el-time-select size="small" placeholder="选择时间" style="width: 118px;" />
                </div>
                <div>每日22:00至次日08:00生效</div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <TaskInfoDialog :visible="taskInfoVisible" @handCloseDialog="onHandCloseAcceptDialog" />
    <SelectCustomerDialog :visible="customerVisible" @handCloseDialog="onHandCloseCustomerDialog" />
    <AddEnterpriseAccountDialog :visible="enterpriseVisible" @handCloseDialog="onHandCloseEnterpriseAccountDialog" />
    <div class="new-fan-footer">
      <el-button size="small" type="primary">保存修改</el-button>
    </div>
  </div>
</template>
<script>
import TaskInfoDialog from './components/taskInfoDialog'
import SelectCustomerDialog from './components/selectCustomerDialog'
import AddEnterpriseAccountDialog from './components/addEnterpriseAccountDialog'
export default {
  data() {
    return {
      taskInfoVisible: false,
      customerVisible: false,
      enterpriseVisible: false,
      checked: true,
      form: {
        customerType: 1,
        accountType: 1,
      },
    }
  },
  components: {
    TaskInfoDialog,
    SelectCustomerDialog,
    AddEnterpriseAccountDialog
  },
  methods: {
    onHandCloseAcceptDialog() {
      this.taskInfoVisible = false
    },
    onHandCloseCustomerDialog() {
      this.customerVisible = false
    },
    onHandCloseEnterpriseAccountDialog() {
      this.enterpriseVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.new-fan-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;

  .new-fan-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .head-title {
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;

      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;
        ;
        font-weight: 400;

        &:hover+.example-modal {
          display: block;
        }
      }

      .example-modal {
        position: fixed;
        left: 0;
        margin-top: 10px;
        display: none;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        background: #FFFFFF;

        .example-cover {
          height: 600px;
        }
      }
    }

    .head-setting {
      display: flex;
      align-items: center;

      .check-box {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        line-height: 22px;

        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }

  .new-fan-body {
    margin: 12px 12px 76px;

    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }

          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }

        .card-content {
          padding: 20px 20px 0;
          font-size: 14px;
          line-height: 22px;

          .desc {
            font-size: 14px;
            margin-top: 4px;
            color: rgba(0, 0, 0, 0.45);
          }

          .tips {
            margin-left: 4px;
            color: rgba(0, 0, 0, 0.45);
          }

          .sleep-rows-item {
            margin-top: 12px;
            display: grid;
            column-gap: 4px;
            grid-template-columns: 30px 118px 6px 118px 78px;
          }

          .threshold-flex {
            display: grid;
            column-gap: 4px;
            grid-template-columns: 88px 6px 88px 14px 80px;

            .recommend-value {
              color: #3070ff;
            }
          }

          .condition-block {
            margin-top: 12px;
            padding: 16px;
            background: #f7f7f7;
            border-radius: 2px;
            border: 1px solid #e9e9e9;
            display: flex;
            align-items: center;

            .condition-label {
              width: 120px;
            }
          }

          .flex-grid-row {
            display: grid;
            grid-template-columns: 48px 1fr 60px 88px;
            column-gap: 8px;
            margin-bottom: 20px;
            align-items: center;

            .cover-image {
              width: 48px;
              height: 48px;
            }

            .status {
              font-size: 14px;
              font-weight: 400;
              color: #52c41a;
            }

            .btn {
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .appy-time-rows {
            display: flex;
            align-items: center;

            .row-item {
              span {
                margin-left: 8px;
              }
            }

            .liner {
              margin: 0 4px;
            }
          }
          .radio-card {
            width: 370px;
            height: 38px;
            display: flex;
            align-items: center;
            padding-left: 10px;
            border: 1px solid #e9e9e9;
            background: #f7f7f7;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            margin-top: 10px;
          }
          .container-card {
            background-color: #f7f7f7;
            padding: 16px;
            display: flex;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .new-fan-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
</style>